<template>
  <el-cascader
    v-model="departId"
    class="dynamicForm-cascader"
    clearable
    :options="options"
    :props="{ label: 'name', value: 'id', emitPath: false }"
    @change="handleChange"
  ></el-cascader>
</template>

<script>
  import axios from 'axios';
  export default {
    components: {},
    props: {
      action: {
        type: Object,
        default: () => {
          return {};
        }
      },
      selected: {
        type: Number | String,
        default: () => {
          return '';
        }
      }
    },
    data() {
      return {
        options: [],
        departId: ''
      };
    },
    watch: {
      selected: {
        handler(val) {
          if (val) {
            this.departId = parseInt(val);
          } else {
            this.departId = '';
          }
        }
      }
    },
    computed: {},
    methods: {
      handleChange(value) {
        this.$emit('selectChange', { eicCode: this.action.eicCode, value });
      },
      async init() {
        const { data } = await axios.request({
          url: '/api/v1/event/material/depart/tree',
          method: 'get'
        });
        if (data.code === 200) {
          this.options = data.result;
        }
      }
    },
    created() {},
    mounted() {
      this.init();
    }
  };
</script>
<style lang="scss">
  .dynamicForm-cascader {
    width: 100%;
  }
</style>
